<template>
	<view class="container">
		<!-- 顶部功能区 -->
		<view class="header card">
			<view class="search-bar">
				<uni-icons type="search" size="18" color="#a5b1c2"></uni-icons>
				<input type="text" placeholder="查找医友" />
			</view>
			<view class="add-btn" @click="handleAdd">
				<uni-icons type="plusempty" size="24" color="#ffffff"></uni-icons>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view scroll-y class="content-area">
			<!-- 小科普 -->
			<view class="section-title">
				<text class="title-text">小科普</text>
				<text class="title-more">查看更多</text>
			</view>
			<scroll-view scroll-x class="scroll-content">
				<view class="science-item card" v-for="(item, index) in scienceList" :key="index" @click="viewScience(item)">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="science-info">
						<text class="science-title">{{item.title}}</text>
						<view class="science-meta">
							<text class="science-author text-muted">医学前沿</text>
							<text class="science-time text-muted">今天</text>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 查指南 -->
			<view class="section-title">
				<text class="title-text">查指南</text>
				<text class="title-more">查看更多</text>
			</view>
			<view class="guide-list card">
				<view class="guide-item" v-for="(item, index) in guideList" :key="index" @click="viewGuide(item)">
					<view class="guide-content">
						<text class="guide-badge" v-if="index === 0">最新</text>
						<text class="guide-title">{{item.title}}</text>
						<view class="guide-meta">
							<text class="guide-tag">专业指南</text>
							<text class="guide-time text-muted">{{item.date}}</text>
						</view>
					</view>
					<uni-icons type="arrowright" size="18" color="#a5b1c2"></uni-icons>
				</view>
			</view>
			
			<!-- 推荐医友 -->
			<view class="section-title">
				<text class="title-text">推荐医友</text>
				<text class="title-more">查看更多</text>
			</view>
			<view class="doctors-list">
				<view class="doctor-item card" v-for="index in 3" :key="index" @click="viewDoctor(index)">
					<image class="doctor-avatar" src="/static/images/doctor.png" mode="aspectFill"></image>
					<view class="doctor-info">
						<text class="doctor-name">医生{{index}}</text>
						<text class="doctor-title text-muted">主任医师</text>
						<view class="doctor-tags">
							<text class="doctor-tag">内科</text>
							<text class="doctor-tag">心脏</text>
						</view>
					</view>
					<button size="mini" class="follow-btn">关注</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scienceList: [
				{
					id: 1,
					title: '常见病预防',
					image: '/static/cs/yfjb.jpeg'
				},
				{
					id: 2,
					title: '健康知识',
					image: '/static/cs/jkzs.jpeg'
				},
				{
					id: 3,
					title: '健康知识2',
					image: '/static/cs/jkzs.jpeg'
				}
			],
			guideList: [
				{
					id: 1,
					title: '高血压诊疗指南',
					date: '2024-01-15'
				},
				{
					id: 2,
					title: '糖尿病防治指南',
					date: '2024-01-14'
				}
			]
		}
	},
	methods: {
		handleAdd() {
			uni.navigateTo({
				url: '/pages/post/create'
			})
		},
		viewScience(item) {
			uni.navigateTo({
				url: `/pages/science/detail?id=${item.id}`
			})
		},
		viewGuide(item) {
			uni.navigateTo({
				url: `/pages/guide/detail?id=${item.id}`
			})
		},
		viewDoctor(id) {
			uni.navigateTo({
				url: `/pages/doctor/detail?id=${id}`
			})
		},
		handleNav(type) {
			switch(type) {
				case 'study':
					uni.switchTab({
						url: '/pages/index/index'
					})
					break
				case 'discover':
					// 当前页面
					break
				case 'ai':
					uni.switchTab({
						url: '/pages/ai/index'
					})
					break
				case 'message':
					uni.switchTab({
						url: '/pages/message/index'
					})
					break
				case 'mine':
					uni.switchTab({
						url: '/pages/personal/index'
					})
					break
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	background-color: #ebf5fb;
}

.header {
	padding: 20rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 5rpx 20rpx rgba(52, 152, 219, 0.1);
}

.search-bar {
	flex: 1;
	margin-right: 20rpx;
	background-color: #f5f7fa;
	border-radius: 40rpx;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
}

.search-bar .iconfont {
	font-size: 30rpx;
	color: #a5b1c2;
	margin-right: 10rpx;
}

.search-bar input {
	flex: 1;
	// height: 60rpx;
	font-size: 28rpx;
	background-color: transparent;
	border: none;
}

.add-btn {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	color: #fff;
	border-radius: 40rpx;
	box-shadow: 0 6rpx 15rpx rgba(52, 152, 219, 0.3);
}

.add-btn .iconfont {
	font-size: 40rpx;
}

.section-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 40rpx 0 20rpx 0;
	padding: 0 10rpx;
}

.title-text {
	font-size: 34rpx;
	font-weight: 600;
	position: relative;
	padding-left: 20rpx;
}

.title-text::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6rpx;
	width: 8rpx;
	height: 30rpx;
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	border-radius: 4rpx;
}

.title-more {
	font-size: 24rpx;
	color: #a5b1c2;
}

.scroll-content {
	white-space: nowrap;
	padding: 10rpx 0;
}

.science-item {
	display: inline-block;
	margin-right: 20rpx;
	width: 300rpx;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 5rpx 20rpx rgba(52, 152, 219, 0.1);
	transition: all 0.3s ease;
	
	&:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 25rpx rgba(52, 152, 219, 0.15);
	}
}

.science-item:last-child {
	margin-right: 0;
}

.science-item image {
	width: 100%;
	height: 160rpx;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}

.science-info {
	padding: 20rpx;
	background-color: #fff;
}

.science-title {
	font-size: 28rpx;
	font-weight: 500;
	margin-bottom: 10rpx;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.science-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 22rpx;
}

.guide-list {
	border-radius: 20rpx;
	background: #fff;
	box-shadow: 0 5rpx 20rpx rgba(52, 152, 219, 0.1);
}

.guide-item {
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2rpx solid #ebf5fb;
	
	&:last-child {
		border-bottom: none;
	}
	
	&:active {
		background-color: rgba(52, 152, 219, 0.05);
	}
}

.guide-content {
	flex: 1;
}

.guide-badge {
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	color: #fff;
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 100rpx;
	margin-right: 10rpx;
}

.guide-title {
	display: block;
	font-size: 30rpx;
	font-weight: 500;
	margin-bottom: 10rpx;
}

.guide-meta {
	display: flex;
	align-items: center;
}

.guide-tag {
	background-color: #ebf5fb;
	color: #3498db;
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 8rpx;
	margin-right: 10rpx;
}

.guide-time {
	font-size: 22rpx;
}

.doctors-list {
	margin-bottom: 40rpx;
}

.doctor-item {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 5rpx 20rpx rgba(52, 152, 219, 0.1);
}

.doctor-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	border: 4rpx solid #ebf5fb;
}

.doctor-info {
	flex: 1;
}

.doctor-name {
	font-size: 32rpx;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.doctor-title {
	font-size: 26rpx;
	margin-bottom: 12rpx;
}

.doctor-tags {
	display: flex;
	flex-wrap: wrap;
}

.doctor-tag {
	background-color: #ebf5fb;
	color: #3498db;
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 8rpx;
	margin-right: 10rpx;
}

.follow-btn {
	background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
	color: #fff;
	font-size: 28rpx;
	// padding: 10rpx 60rpx;
	// border-radius: 100rpx;
	border: none;
	// height: 68rpx;
	
	&:active {
		opacity: 0.9;
		transform: translateY(2rpx);
	}
}
</style> 